<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Show Code</title><meta name="keywords" content="大前端,LSF,Java,LSF博客,全栈"><meta name="author" content="const name='LSF'"><meta name="copyright" content="const name='LSF'"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="人生就像品茶，懂得吃苦，才能回甘啊。">
<meta property="og:type" content="website">
<meta property="og:title" content="Show Code">
<meta property="og:url" content="https://www.frontblog.top/page/2/index.html">
<meta property="og:site_name" content="Show Code">
<meta property="og:description" content="人生就像品茶，懂得吃苦，才能回甘啊。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://www.frontblog.top/img/ls.png">
<meta property="article:author" content="const name&#x3D;&#39;LSF&#39;">
<meta property="article:tag" content="大前端,LSF,Java,LSF博客,全栈">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://www.frontblog.top/img/ls.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://www.frontblog.top/page/2/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="baidu-site-verification" content="bca62aafa83c929047096bcb43c5ce68"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>(adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: 'ca-pub-7698107383427296',
  enable_page_level_ads: 'true'
});</script><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?bca62aafa83c929047096bcb43c5ce68";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2021-08-24 16:30:11'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="/img/ls.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">21</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">19</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/img/headertop.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Show Code</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Show Code</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://gitee.com/lsfcxz" rel="external nofollow noreferrer" target="_blank" title="Gitee"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:1770813141@qq.com" rel="external nofollow noreferrer" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/koa2/" title="Koa原理(二)">     <img class="post_bg" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Koa原理(二)"></a></div><div class="recent-post-info"><a class="article-title" href="/koa2/" title="Koa原理(二)">Koa原理(二)</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-07-10T08:14:36.000Z" title="发表于 2021-07-10 16:14:36">2021-07-10</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Koa/">Koa</a></span></div><div class="content">在上面一篇中介绍了Koa的基本概念，这篇具体介绍Request属性，路由以及app.use的引用
Request属性首先我们来看下以下的代码：
123456789const Koa = require(&#x27;koa&#x27;);const app = new Koa();app.use(async ctx =&gt; &#123;  console.log(ctx);  ctx.body = &#x27;Hello World&#x27;;&#125;);app.listen(3000);

控制台输入可能会出现以下内容
1234567891011121314151617181920212223242526272829303132&#123;  request: &#123;    method: &#x27;GET&#x27;,    url: &#x27;/&#x27;,    header: &#123;      host: &#x27;localhost:3000&#x27;,      connection: &#x27;keep-alive&#x27;,      ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/project/" title="博客社区项目">     <img class="post_bg" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="博客社区项目"></a></div><div class="recent-post-info"><a class="article-title" href="/project/" title="博客社区项目">博客社区项目</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-07-09T14:07:01.000Z" title="发表于 2021-07-09 22:07:01">2021-07-09</time></span></div><div class="content">
  2a46ed2001c009a666dd1df31f3d624f417c4053107b1b55839d7e372d84f02e29b4149dfb2145dea8571c542b54ca2b3f32ea83cff640a143578bf2b9ae06b44699b5789bbbb442644b3ac3bf25bf935b84cf1a91e8823c54fddfc2a1aa17d5e058b340fdafb20cfd1b1153814c66fdaa05faf8ba9351221a1c19f6e53071c78254311fb38f70a71060e08bf9ca9d0220805b1da6b8385e4f869c52f8b2a5e31cae0c9d520b001d68e1875fa1ffbf4f390e1de03ead54e81675a8e112ace418b4477af78343edb35469102fbebbc505b0071d95019887f3ce4645a397eacea5829df7b058eaefcb7609873b3bae354a4eccdabd79f6c844c ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/koa/" title="koa简介(一)">     <img class="post_bg" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="koa简介(一)"></a></div><div class="recent-post-info"><a class="article-title" href="/koa/" title="koa简介(一)">koa简介(一)</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-29T07:24:33.000Z" title="发表于 2021-06-29 15:24:33">2021-06-29</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Koa/">Koa</a></span></div><div class="content">koa简介：
Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

这是中文网上的一段话，Koa是一个非常轻量的框架，没有集成任何中间件，框架本身主要实现http的协议处理，koa支持acync/await写法，使用同步的写法实现异步的方法
官网：https://koajs.com/
使用方式：

新建一个文件夹，使用npm init -y初始化项目

使用npm i koa -S，安装Koa

新建index.js文件
12345678const Koa = require(&#x27;koa&#x27;);//引入Koa这个包，const app = new Koa();//实例化这个对象app.use(async ctx =&gt; &#123;  ctx.body = &#x27;Hello W ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/wxbug/" title="使用SVG自定义tabbar的坑">     <img class="post_bg" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=603789532,900152941&amp;fm=26&amp;gp=0.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用SVG自定义tabbar的坑"></a></div><div class="recent-post-info"><a class="article-title" href="/wxbug/" title="使用SVG自定义tabbar的坑">使用SVG自定义tabbar的坑</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-16T02:55:34.000Z" title="发表于 2021-05-16 10:55:34">2021-05-16</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/">开发中的问题总结</a></span></div><div class="content">前言本文介绍在开发微信小程序自定义tabbar遇到的问题以及解决问题的方法及思路，采用的技术栈是mpvue。
在自定义tabbar有很多种解决的方案，这里这是列举一种，主要是结合mpvue和svg来自定义tabbar，使用svg的好处在于节约包体积
问题及解决方法问题：在自定义的tabbar里面使用自定义icon组件时，模拟器正常，真机失效。
解决思路：cover-view不支持image标签，这在模拟器会正常显示，在真机会失效，使用view标签包裹image标签即可，但是层叠不高，神奇的是我用组件封装了icon，在icon组件下我用的img标签，不报错，只有我在cover-view下直接使用img标签时才会报错，说不清这是小程序的坑还是框架。
解决问题过程自定义Icon组件：
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273&lt;template&gt;  & ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/css3/" title="CSS3系列（一）">     <img class="post_bg" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=968859261,3896020000&amp;fm=26&amp;gp=0.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS3系列（一）"></a></div><div class="recent-post-info"><a class="article-title" href="/css3/" title="CSS3系列（一）">CSS3系列（一）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-15T03:24:16.000Z" title="发表于 2021-05-15 11:24:16">2021-05-15</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/CSS3/">CSS3</a></span></div><div class="content">
CSS（cascading style sheet 层叠样式表）用来给HTML标签添加样式的语言
CSS3是最新的版本，新增大量样式，动画、3D特效和移动端特性

简介三大特性：

层叠性：小属性会层叠大属性
优先级：id&gt;class&gt;标签
继承性:属性具有继承的性质

CSS负责网站的样式，和HTML连接在一起使用的是选择器，语法大概是这样的
123选择器&#123;属性：属性值;&#125;

选择器CSS2.1
标签选择器
123span&#123;color:red&#125;

也称为元素选择器，选择页面上所有该种标签，无论这个标签所处的位置深浅，覆盖面大

id选择器
1#idname

标签唯一值，不能数字开头

class选择器
1.classname

不唯一，类选择器，选择指定标签的选择器

复合选择器
后代选择器：选择类名box标签内部所有spec标签
1.box .spec

交集选择器：选择既是li又是spec类的标签 
1li.spec

并集选择器：选择所有ul和ol标签
1ol,ul
伪类
指定要选择的元素的特殊状态，超级链接拥有4个特殊状 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/bug/" title="Svg转Base64的坑">     <img class="post_bg" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Svg转Base64的坑"></a></div><div class="recent-post-info"><a class="article-title" href="/bug/" title="Svg转Base64的坑">Svg转Base64的坑</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-12T03:36:26.000Z" title="发表于 2021-05-12 11:36:26">2021-05-12</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/">开发中的问题总结</a></span></div><div class="content">起因最近开发小程序需要用到svg的方式来显示图标，使用js-Base64这个库来转换
经历当我使用js-Base64这个库来转换后，发现居然不显示，在这之前，为了测试svg图片的fill属性，加上了
fill=‘#ffffff’ 的属性，也正因为如此，才有了后面的问题

SVG图片不显示，在DOM结构中却能看到解析完成并引用

下面是转换的主要代码：
123456789101112131415161718192021222324// 1.读取svg图片     wx.getFileSystemManager().readFile(&#123;       filePath: this.src,//svg文件       encoding: &#x27;binary&#x27;,//转换的方式       success: res =&gt; &#123;         const reg = /fill=&quot;#[a-zA-Z0-9]&#123;0,6&#125;&quot;/g         let str = &#x27;&#x27;         // 2.修改fil ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/wx/" title="微信小程序生命周期">     <img class="post_bg" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=603789532,900152941&amp;fm=26&amp;gp=0.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="微信小程序生命周期"></a></div><div class="recent-post-info"><a class="article-title" href="/wx/" title="微信小程序生命周期">微信小程序生命周期</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-11T02:33:48.000Z" title="发表于 2021-05-11 10:33:48">2021-05-11</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">微信小程序</a></span></div><div class="content">本文介绍微信小程序的各个生命周期
全局的生命周期：OnLaunch在小程序启动的时候，页面还没有渲染完成，自动执行的函数，运行在内存中，只会在第一次进入小程序执行，有一个options参数，接受的options.scene是进入小程序的方式，options.query是区分哪个用户的推广，扫码点餐就是一个例子

onShow在小程序每次去显示的时候自动执行，也就是退出再进入时会被执行，同样有参数，和onLaunch相同，执行顺序是在onLaunch之后，在扫码点餐这个场景下，这个生命函数更加合适，如果用户退出通过其他扫码进入，这个函数将执行，因为很快的退出程序再进入，OnLaunch并不会执行

OnHied取消展示的时候自动执行，比如退出小程序，或者切后台时候，自动执行，没有参数
onError程序出错时自动执行，有参数，参数代表出错信息
页面的生命周期：OnLaunch页面第一次启动的时候或者第一次加载内存中的时候自动加载，没有参数
onShow页面每次被加载展示的时候，自动执行，没有参数
OnHied页面每次被取消展示的时候，自动执行，没有参数
OnReady和OnLaunch一 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/auth/" title="登录鉴权原理（JWT）">     <img class="post_bg" src="https://z3.ax1x.com/2021/05/15/g6TCIf.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="登录鉴权原理（JWT）"></a></div><div class="recent-post-info"><a class="article-title" href="/auth/" title="登录鉴权原理（JWT）">登录鉴权原理（JWT）</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-06T11:56:52.000Z" title="发表于 2021-05-06 19:56:52">2021-05-06</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%89%B4%E6%9D%83/">鉴权</a></span></div><div class="content">本文介绍鉴权相关知识，主要以Koa作为后端作为Web框架，鉴权以JWT为主，这也是我在自己的博客项目实现的一种方法，阅读需要基本Koa，JavaScript知识
简介什么是鉴权？

鉴别用户有没有权限，登录鉴权，就是前端用户发起一次请求，把用户名密码发往客户端，服务端去往数据库查询数据，校验是否正确，是则返回数据，否则返回对应的提示

为什么需要鉴权？

保护用户数据的安全性，如果一个后端系统没有鉴权，任何人都可以请求到这个Api，这是很危险的

三种鉴权方式session/cookie优点：

轻易扩展、简单

缺点：

安全性低、性能低，服务端存储、多服务同步session困难、跨平台困难

JWT优点：

易扩展、支持移动设备、跨应用调用、相对安全、承载信息丰富

缺点：

刷新与过期处理、Payload不易过大、中间人攻击

Oauth优点：

开放、安全、简单、权限指定

缺点：

需要增加授权服务器、增加网络请求

JWT工作原理什么是JWT?

JWT全程JSON Web Token，一个JWT由三部分构成：Header、Payload、Signatrue

Header ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/WebSocket/" title="WebSocket实现多人聊天室">     <img class="post_bg" src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=643984339,267064996&amp;fm=26&amp;gp=0.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="WebSocket实现多人聊天室"></a></div><div class="recent-post-info"><a class="article-title" href="/WebSocket/" title="WebSocket实现多人聊天室">WebSocket实现多人聊天室</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-05T08:10:39.000Z" title="发表于 2021-05-05 16:10:39">2021-05-05</time></span></div><div class="content">本文介绍WebSocket相关知识，并最终完成一个多人聊天室应用，最终实现代码在文末
简介：什么是webSocke？

webSocke是网络传输协议，可在单个TCP连接上全双工通讯，位于OSI模型的应用层


webSocke是长连接的协议，实时的通讯，允许服务端推送消息到客户端，并且这种长连接并不会占用网络资源，这就好比一条流管道一样，不输送东西，当然不会造成资源的 流失。

什么是全双功？

在用一时刻，c端和S端能同时传输数据

webSocke应用场景：

大数据可视化，聊天、直播弹幕、游戏等需要实时数据的应用

特点：

TCP连接，与HTTP协议兼容
双向通信，主动推送
无同源限制，协议标识符是ws（加密wss）

下图很好的对比了http协议和websocket协议，传统的ajax是通过轮询的方式去获取数据，比如每个几秒去拉取数据，而在这个时间段，数据发生变化，客户端是不知道的， 只有用户去请求，才能拿去到数据，这样影响了用户体验，也浪费了带宽，（因为每次请求都发送数据，而每次请求不都是有用的，比如数据和原先一样），而webSocke恰好解决了这个问题，在连接的长连接过 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/Html%E4%B8%80/" title="Html5系列(一)">     <img class="post_bg" src="https://www.w3.org/html/logo/img/html5-topper.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Html5系列(一)"></a></div><div class="recent-post-info"><a class="article-title" href="/Html%E4%B8%80/" title="Html5系列(一)">Html5系列(一)</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-05T03:18:38.000Z" title="发表于 2021-05-05 11:18:38">2021-05-05</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/HTML5/">HTML5</a></span></div><div class="content">本文介绍Html5相关知识，Html5作为前端必须掌握并且精通的语言，可见重要性，为此总结出Htlm5的知识
简介
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。 —-百度百科

简单说Html5是超文本编辑语言，以文档方式存在，不需要通过编译，由浏览器执行，是网页结构的基础
Html5骨架来看一个基础的Html5的结构
123456789101112&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;  &lt;meta charset=&quot;UTF-8&quot;&gt;  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;  &lt;meta name=&quot;viewport&quot; con ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/3/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="/img/ls.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">const name='LSF'</div><div class="author-info__description">人生就像品茶，懂得吃苦，才能回甘啊。</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">21</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">19</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener external nofollow noreferrer" href="https://gitee.com/lsfcxz"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/lsfcxz" rel="external nofollow noreferrer" target="_blank" title="Gitee"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:1770813141@qq.com" rel="external nofollow noreferrer" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">人生就像品茶，懂得吃苦，才能回甘啊。</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/CSSMedia/" title="CSS3媒体查询"><img src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS3媒体查询"/></a><div class="content"><a class="title" href="/CSSMedia/" title="CSS3媒体查询">CSS3媒体查询</a><time datetime="2021-08-24T06:54:22.000Z" title="发表于 2021-08-24 14:54:22">2021-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/mongodb/" title="使用Docker方式安装mongodb数据库"><img src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用Docker方式安装mongodb数据库"/></a><div class="content"><a class="title" href="/mongodb/" title="使用Docker方式安装mongodb数据库">使用Docker方式安装mongodb数据库</a><time datetime="2021-07-12T12:21:57.000Z" title="发表于 2021-07-12 20:21:57">2021-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/cicd/" title="实现CICD平台"><img src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="实现CICD平台"/></a><div class="content"><a class="title" href="/cicd/" title="实现CICD平台">实现CICD平台</a><time datetime="2021-07-12T10:14:05.000Z" title="发表于 2021-07-12 18:14:05">2021-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/nosql/" title="NoSQL设计"><img src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="NoSQL设计"/></a><div class="content"><a class="title" href="/nosql/" title="NoSQL设计">NoSQL设计</a><time datetime="2021-07-12T08:07:59.000Z" title="发表于 2021-07-12 16:07:59">2021-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/email/" title="阿里云邮箱配置问题"><img src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="阿里云邮箱配置问题"/></a><div class="content"><a class="title" href="/email/" title="阿里云邮箱配置问题">阿里云邮箱配置问题</a><time datetime="2021-07-11T15:36:07.000Z" title="发表于 2021-07-11 23:36:07">2021-07-11</time></div></div></div></div><div class="card-widget ads-wrap"><script data-ad-client="ca-pub-7698107383427296" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/CSS3/"><span class="card-category-list-name">CSS3</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/HTML5/"><span class="card-category-list-name">HTML5</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Koa/"><span class="card-category-list-name">Koa</span><span class="card-category-list-count">6</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/"><span class="card-category-list-name">开发中的问题总结</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"><span class="card-category-list-name">微信小程序</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/"><span class="card-category-list-name">数据库</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E8%87%AA%E5%8A%A8%E5%8C%96/"><span class="card-category-list-name">自动化</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E9%89%B4%E6%9D%83/"><span class="card-category-list-name">鉴权</span><span class="card-category-list-count">1</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Docker/" style="font-size: 1.1em; color: #999">Docker</a> <a href="/tags/Html5/" style="font-size: 1.1em; color: #999">Html5</a> <a href="/tags/JWT/" style="font-size: 1.1em; color: #999">JWT</a> <a href="/tags/Java/" style="font-size: 1.1em; color: #999">Java</a> <a href="/tags/Koa/" style="font-size: 1.5em; color: #99a9bf">Koa</a> <a href="/tags/MongoDB/" style="font-size: 1.1em; color: #999">MongoDB</a> <a href="/tags/NoSQL/" style="font-size: 1.1em; color: #999">NoSQL</a> <a href="/tags/WebSocket/" style="font-size: 1.1em; color: #999">WebSocket</a> <a href="/tags/Webpack/" style="font-size: 1.3em; color: #99a1ac">Webpack</a> <a href="/tags/css3/" style="font-size: 1.1em; color: #999">css3</a> <a href="/tags/svg/" style="font-size: 1.1em; color: #999">svg</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" style="font-size: 1.1em; color: #999">前端工程化</a> <a href="/tags/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2/" style="font-size: 1.1em; color: #999">媒体查询</a> <a href="/tags/%E5%AE%9E%E6%97%B6%E6%B6%88%E6%81%AF/" style="font-size: 1.1em; color: #999">实时消息</a> <a href="/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 1.3em; color: #99a1ac">微信小程序</a> <a href="/tags/%E6%9E%B6%E6%9E%84/" style="font-size: 1.1em; color: #999">架构</a> <a href="/tags/%E8%87%AA%E5%8A%A8%E5%8C%96%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" style="font-size: 1.1em; color: #999">自动化环境搭建</a> <a href="/tags/%E9%82%AE%E7%AE%B1%E9%85%8D%E7%BD%AE/" style="font-size: 1.1em; color: #999">邮箱配置</a> <a href="/tags/%E9%89%B4%E6%9D%83/" style="font-size: 1.1em; color: #999">鉴权</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/07/"><span class="card-archive-list-date">七月 2021</span><span class="card-archive-list-count">11</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/06/"><span class="card-archive-list-date">六月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/05/"><span class="card-archive-list-date">五月 2021</span><span class="card-archive-list-count">8</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">21</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2021-03-28T16:00:00.000Z"></div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2021-08-24T08:30:11.634Z"></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/img/headertop.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2021 By const name='LSF'</div><div class="footer_custom_text"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://beian.miit.gov.cn/"><img class="icp-icon" src="/img/icp.png"><span>粤ICP备2021029106号</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="chat_btn" type="button" title="rightside.chat_btn"><i class="fas fa-sms"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    var typed = new Typed("#subtitle", {
      strings: "今日事&#44;今日毕,Never put off till tomorrow what you can do today".split(","),
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = '今日事&#44;今日毕'
  }
}

if (true) {
  if (typeof Typed === 'function') {
    subtitleType()
  } else {
    getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
  }
} else {
  subtitleType()
}</script></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>